<template>
  <el-row>
    <el-col>
      <el-card :body-style="{ padding: '0px' }" style="width: 95%; height: 470px; margin: 0 auto 20px ;" shadow="hover">
        <div style="height: 250px; overflow: hidden; border-bottom: 1px solid #b6b6b6">
<!--          图片-->
          <a :href="'/article/detail?id=' + article.id + '&nid=' + article.nationId">
            <img :src="article.cover" width="100%" class="image" />
          </a>
        </div>
<!--        标题-->
        <div style="padding: 14px; height: 50%" >
          <a :href="'/article/detail?id=' + article.id + '&nid=' + article.nationId" style="text-decoration: none;   color: #292929;">
            <el-tooltip :content="article.title"
                        placement="top"
                        effect="light"
                        popper-class="tip"
            >
            <span class="title" style="height: 55px;" >{{ article.title }}</span>
            </el-tooltip>
          </a>
<!--          内容-->
          <div class="bottom clearfix" style="margin-top:20px;margin-bottom: 10px;">
            <span style="font-size: 16px;line-height: 24px;height: 75px " class="context">{{ article.synopsis }}</span>
          </div>
<!--          作者-->
          <div style="position: relative; ">
            <el-avatar :size="25" :src="article.avatar"></el-avatar>
            <span style="
                position: absolute;
                margin-left: 4px;
                margin-top: 14px;
                top: -9.6px;
                font-size: 14px;
              ">{{ article.nickname }}</span>
          </div>
        </div>

      </el-card>
    </el-col>
  </el-row>
</template>




<script>
export default {
  props: {
    article: {
      categoryId: String,
      collectCount: String,
      cover: String,
      gmtCreate: String,
      id: String,
      synopsis: String,
      title: String,
      loveCount: String,
      userId: String,
      nationId:String,
    }
  },
  data() {
    return {

    };
  },
}
</script>

<style>
.context {
  font-size: 13px;
  color: #999;
  overflow: hidden;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}


.title {

  font-size: 22px;
  color: black;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.image:hover{
  background-color: #222222;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
<style>
* {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB W3", "Hiragino Sans GB",
  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
